<template>
  <div class="upload" :class="{'inline': inline}">
    <el-upload
      class="upload-base pull-left"
      action="/zuul/ms-mongodb/file/photo/upload"
      :headers="{}"
      :data="{group: 'upload-image'}"
      :show-file-list="false"
      name="photo"
      :multiple="multiple"
      :on-success="onSuccess"
      :before-upload="beforeUpload"
      :http-request="httpRequest">
      <slot>
        <i class="el-icon-upload"></i>
        <div>将文件拖到此处，或<em>点击上传</em></div>
      </slot>
    </el-upload>
    <div class="clearfix"></div>
  </div>
</template>
<script>
import {alert, isEqual} from '@/utils'
import upload from './ajax'
export default {
  props: {
    sizeLimit: { // 最大大小单位M
      type: Number,
      default: 2
    },
    max: {
      type: Number,
      default: 100
    },
    value: {
      type: Array,
      default() {
        return []
      }
    },
    readonly: {
      type: Boolean,
      default: false
    },
    inline: {
      type: Boolean,
      default: false
    },
    drag: {
      type: Boolean,
      default: true
    },
    showImageList: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      typeAllow: ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
      $viewer: '',
      imagesObj: [],
      loading: false
    }
  },
  watch: {
    ids(val, oldVal) {
      if (isEqual(val, oldVal) && isEqual(val, this.value)) {
        return
      }
      this.$emit('input', val)
    },
    value(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.initValue(val)
    }
  },
  created() {
    this.initValue(this.value)
  },
  methods: {
    onSuccess(response, file, fileList) {
      if (response && response.success) {
        if (this.multiple) {
          this.imagesObj.push({fileId: response.data.fileId})
        } else {
          this.imagesObj = [{fileId: response.data.fileId}]
        }
      }
      this.$emit('onSuccess', response, file, fileList)
    },
    beforeUpload(file) {
      // 进行验证
      const sizeM = file.size / 1024 / 1024
      if (sizeM > this.sizeLimit) {
        alert('文件大小过大大于：' + this.sizeLimit + 'M')
        return false
      }
      if (this.typeAllow.indexOf(file.type) < 0) {
        alert(`${file.type}文件类型不允许`)
        return false
      }
      if (this.imagesObj.length > this.max) {
        alert(`图片最多允许上传${this.max}张`)
        return false
      }
    },
    showImage(index) {
      if (this.$viewer) {
        this.$viewer.view(index)
      }
    },
    delImage(index) {
      this.imagesObj.splice(index, 1)
    },
    // 上传的方法
    httpRequest(option) {
      this.loading = true
      upload(option).then(response => {
        if (response.success) {
          let name = response.data.fileName.slice(0, response.data.fileName.lastIndexOf('.'))
          this.$emit('file', {fileId: response.data.fileId, fileName: name})
        }
      }).finally(_ => {
        this.loading = false
      })
    },
    initValue(val) {
      if (Array.isArray(val) && val.length) {
        this.imagesObj = val.map(v => { return {fileId: v} })
      } else {
        this.imagesObj = []
      }
    }
  }
}
</script>
